<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 文字信息 -->
        <p>说明：目前支持学科和关键字条件筛选</p>

        <!-- 头部 新增试题按钮 -->
        <div class="addbutton">
          <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
        </div>

        <!-- 头部 表单 筛选区域-->
        <el-form label-width="80px" ref="form" :model="form">

          <el-row>

            <!-- 学科 -->
            <el-col :span="6">
              <el-form-item label="学科"  prop="subjectID">
                <el-select  placeholder="请选择" @change="changeSubject" v-model="form.subjectID"  style="width:100%">
                  <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 二级目录 -->
            <el-col :span="6">
                <el-form-item label="二级目录" prop="catalogID">
                    <el-select  placeholder="请选择" v-model="form.catalogID"  style="width:100%">
                      <el-option
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      v-for="item in directoryList"
                      >
                      </el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <!-- 标签 -->
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select  placeholder="请选择" v-model="form.tags"  style="width:100%">
                  <el-option
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      v-for="item in tagList"
                      >
                      </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 关键字 -->
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input  placeholder="根据题干搜索" v-model="form.keyword">
                </el-input>
              </el-form-item>
            </el-col>

            <!-- 试题类型 -->
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType" :formatter="formatType">
                  <el-select  placeholder="请选择" v-model="form.questionType"  style="width:100%">
                    <el-option
                      v-for="item in questionType"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
              </el-form-item>
            </el-col>

            <!-- 难度 -->
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty" :formatter=" formatDifficult">
                <el-select  placeholder="请选择" v-model="form.difficulty"  style="width:100%">
                  <el-option
                  v-for="item in difficulty"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 方向 -->
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select  placeholder="请选择" v-model="form.direction"  style="width:100%">
                  <el-option
                  v-for="item in directionArr"
                  :key="item"
                  :label="item"
                  :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 录入人 -->
            <el-col :span="6">
              <el-form-item label="录入人" prop="creatorID">
                <el-select  placeholder="请选择" v-model="form.creatorID"  style="width:100%">
                  <el-option
                      v-for="item in userList"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 题目备注 -->
           <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="form.remarks">
                </el-input>
              </el-form-item>
           </el-col>

            <!-- 企业简称 -->
            <el-col :span="6">
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="form.shortName">
                </el-input>
              </el-form-item>
            </el-col>

            <!-- 城市  市区联动 -->
            <el-col :span="6">
              <el-form-item label="城市">
                  <el-select  placeholder="请选择" style="width:50%; margin-right:2%" v-model="form.province" @change="cityChange">
                      <el-option
                      :label="item"
                      :key="item"
                      :value="item"
                      v-for="item in cityList">
                      </el-option>
                  </el-select>

                  <el-select  placeholder="请选择" style="width:48%" v-model="form.city">
                      <el-option
                      :label="item"
                      :key="item"
                      :value="item"
                      v-for="item in areaList">
                      </el-option>
                  </el-select>
              </el-form-item>
            </el-col>

            <!-- 按钮 -->
            <el-col :span="6">
              <el-form-item>
                <el-button size="small" @click="handleClear">清 除</el-button>
                <el-button type="primary" size="small" @click="search">搜 索</el-button>
              </el-form-item>

            </el-col>
          </el-row>

        </el-form>

        <!-- 中间 alert 警告框 -->
        <el-alert
          :closable="false"
          type="info"
          show-icon>
          数据一共 {{ counts }} 条
        </el-alert>
        <!-- 表格 -->
        <el-table
          v-loading="loading"
          :header-cell-style="{background:'#f5f7fa'}"
          :data="tableData"
          style="margin-top:20px ;width: 100%">

          <el-table-column
            fixed
            prop="number"
            label="试题编号"
            width="120">
          </el-table-column>

          <el-table-column
            prop="subject"
            label="学科"
            width="90">
          </el-table-column>

          <el-table-column
            prop="catalog"
            label="目录">
          </el-table-column>

          <el-table-column
            prop="questionType"
            :formatter="formatType"
            label="题型">
          </el-table-column>

          <el-table-column
            prop="remarks"
            width="200"
            label="题干">
          </el-table-column>

          <el-table-column
            prop="addDate"
            width="180"
            :formatter="formatDate"
            label="录入时间">

          <!-- <template #default="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template> -->

          </el-table-column>

          <el-table-column
            prop="difficulty"
            width="90"
            :formatter="formatDifficult"
            label="难度">
          </el-table-column>

          <el-table-column
            prop="creator"
            width="100"
            label="录入人">
          </el-table-column>

          <el-table-column
            prop="address"
            label="操作" width="200px">

          <template #default="{ row }">
             <el-button type="primary" icon="el-icon-view" circle plain @click="handleView(row)"></el-button>
              <el-button type="success" icon="el-icon-edit" circle plain  @click="$router.push(`/questions/new?id=${row.id}`)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle plain @click="handleDel(row.id)"></el-button>
              <el-button  type="warning" icon="el-icon-check" circle plain @click="handleCheck(row.id)"></el-button>
          </template>

          </el-table-column>

        </el-table>
        <!-- 底部 分页功能 -->
        <div class="pagination">
           <el-pagination
              background
              hide-on-single-page
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="1"
              layout=" prev, pager, next, sizes, jumper"
              :total="counts">
          </el-pagination>
        </div>

        <!-- 预览对话框 -->
        <questions-preview
            ref="questionsPreview"
            :data="questionInfo"
            :showDialog.sync="showDialog">
        </questions-preview>

      </el-card>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { simple as list } from '@/api/hmmm/subjects'
import { simple as directoryArr } from '@/api/hmmm/directorys'
import { simple as tagsArr } from '@/api/hmmm/tags'
import { list as baseList, remove } from '@/api/hmmm/questions'
import { simple } from '@/api/base/users'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys'

// 导入对话框组件
import QuestionsPreview from '../components/questions-preview.vue'

// 导入枚举
import { questionType, difficulty, direction } from '@/api/hmmm/constants'

const directionArr = direction

export default {
  name: 'Questions',
  components: {
    QuestionsPreview
  },
  data () {
    return {

      // 城市
      cityList: getCity(),
      // 地区
      areaList: [],

      // form表单数据
      form: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null,
        creatorID: null, // 录入人
        catalogID: null // 目录

      },

      // 学科下拉菜单数据数组
      subjectList: [],
      // 目录数组
      directoryList: [],
      // 标签数组
      tagList: [],
      // 录入人  用户简单列表
      userList: [],
      // 题型数组
      questionType,
      // 难度
      difficulty,
      // 方向数据
      directionArr,
      // 表格数据
      tableData: [],
      // 总条数
      counts: 0,
      // 当前页数
      page: 1,
      // 每页条数
      pagesize: 10,
      // 总页数
      pages: 2,
      // 弹框的显示与隐藏
      showDialog: false,
      // 记录题库详情信息
      questionInfo: {},
      // 加载效果
      loading: false
    }
  },
  created () {
    // 1、获取学科列表
    this.getSubjectList()
    // 2、获取用户简单列表
    this.getUserList()
    // 3、获取基础题库列表
    this.getBaseQuestionList()
    // console.log(getCity, '8888')
  },
  methods: {
    // 1、获取学科列表  渲染学科
    async getSubjectList () {
      const res = await list()
      console.log(res, 'ppppp')
      this.subjectList = res.data
    },
    // 2、获取用户简单列表  渲染录入人
    async getUserList () {
      const { data } = await simple()
      // console.log(data, '6666')
      this.userList = data
    },
    // 3、获取基础题库列表
    async getBaseQuestionList (value) {
      this.loading = true
      // const { data: { counts, page, pages, pagesize, items } } = await baseList(value)
      const { data: { counts, items } } = await baseList(value)
      // console.log(data, 'kkkkk')

      this.tableData = items
      this.counts = counts
      this.loading = false
      // this.page = page
      // this.pages = pages
      // this.pagesize = pagesize
    },
    // 4、点击清除按钮  清空所有之前输入或选择的筛选项数据
    handleClear () {
      this.$refs.form.resetFields()
      this.form = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null,
        creatorID: null, // 录入人
        catalogID: null // 目录

      }
    },
    // --------------------------
    // 5、每页条数变化时
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      // 将对应的页数与页码传递过去
      this.getBaseQuestionList({ page: this.page, pagesize: this.pagesize })
    },
    // 6、当前页变化时
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      // 重新渲染列表
      this.getBaseQuestionList({ page: this.page, pagesize: this.pagesize })
    },
    // 7、删除功能
    handleDel (id) {
      // console.log('del')
      // console.log(id, 'oooo')
      this.$confirm('此操作将永久删除该题目，是否继续？', '提示', { type: 'warning' }).then(async () => {
        await remove({ id })
        // console.log(res)
        this.$message.success('删除该题库成功！')
        this.getBaseQuestionList()
      })
    },
    // 8、处理题型 —— 枚举
    formatType (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index, 'uuu')
      // const { questionType } = ConstantsArr
      // console.log(questionType, 'yyyy')
      const obj = questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 9、处理难度 —— 枚举
    formatDifficult (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index, 'rrr')
      // console.log(difficulty, 'qqq')
      const res = difficulty.find(item => item.value === +cellValue)
      // console.log(res, '888')
      return res ? res.label : '未知'
    },
    // 10、处理日期格式
    formatDate (row, column, cellValue, index) {
      // // console.log(row, column, cellValue, index)
      // const data1 = cellValue.slice(0, 10)
      // // console.log(data1)
      // const data2 = cellValue.slice(11, 19)
      // const data3 = data1 + '  ' + data2
      // return data3
      return dayjs(cellValue).format('YYYY-MM-DD  HH:mm:ss')
    },
    // 11、处理城市联动 —— 根据城市获取地区
    cityChange (cityName) {
      this.areaList = getArea(cityName)
      // console.log(this.areaList)
    },
    // 12、精选功能
    handleCheck (id) {
      this.$confirm('此操作将该题目加入精选,是否继续？', '提示', { type: 'warning' }).then(() => {
        // 提示并跳转
        this.$message.success('加入精选成功')
        this.$router.push('/questions/choice')
      })
    },
    // 13、预览功能
    async handleView (questionInfo) {
      this.showDialog = true
      // 记录点击的是哪一题的信息
      this.questionInfo = questionInfo
    },
    // 14、学科改变时 同时改变目录跟标签
    async changeSubject (subjectID) {
      if (subjectID) {
        // 获取二级目录
        const res = await directoryArr({ subjectID })
        // console.log(res, 'bbbbb')
        this.directoryList = res.data

        // 获取标签
        const res1 = await tagsArr({ subjectID })
        // console.log(res1, 'mmmm')
        this.tagList = res1.data
      } else {
        this.directoryList = []
        this.tagList = []
      }
    },
    // 15、搜索功能
    search () {
      this.getBaseQuestionList(this.form)
    }
  }
}

</script>

<style  lang="scss" scoped>
.question-container {
  padding: 0 10px;
  margin: 10px 0;
}
p{
  font-size: 12px;
  color: #ff054c;
  margin-bottom: 15px;
}
.addbutton{
  text-align: right;
  margin-bottom: 15px;
}
.pagination{
  text-align: right;
  margin-top:10px ;
}
</style>
